<template>
  <div class="personal_box">
    <el-tabs v-model="activeName" @tab-click="tab_click_method">
      <el-tab-pane label="我的信息" name="first">
        <div style="display: flex; align-items: center; padding: 15px">
          <div class="avatar-container" @click="triggerFileInput">
            <el-avatar style="width: 80px; height: 80px;" :src="user.avatar"></el-avatar>
            <div class="overlay">点击修改头像</div>
            <input ref="fileInput" type="file" style="display: none;" @change="handleAvatarChange" accept="image/*"/>
          </div>
          <div style="line-height: 35px; margin-left: 15px">
            <span>{{ user.nickname }}</span><br>
            <span>{{ depMap[user.dep] || '未知学院' }}</span>
          </div>
        </div>
        <el-divider></el-divider>
        <el-form ref="user" :model="user" label-width="80px" style="width: 400px">
          <el-form-item label="nickname">
            <el-input v-model="user.nickname"></el-input>
          </el-form-item>
          <el-form-item label="phone">
            <el-input v-model="user.phone" disabled></el-input>
          </el-form-item>
          <el-form-item label="dep">
            <el-select v-model="user.dep" placeholder="请选择学院">
              <el-option
                v-for="(name, id) in depMap"
                :key="id"
                :label="name"
                :value="Number(id)">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="saveUserInfo">保存修改</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="修改密码" name="fourth">
        <el-form :model="passwordForm" ref="passwordForm" label-width="100px" style="width: 400px">
          <el-form-item label="旧密码" prop="oldPassword"
                        :rules="[{ required: true, message: '请输入旧密码', trigger: 'blur' }]">
            <el-input v-model="passwordForm.oldPassword" type="password" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="newPassword"
                        :rules="[{ required: true, message: '请输入新密码', trigger: 'blur' }]">
            <el-input v-model="passwordForm.newPassword" type="password" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="confirmPassword"
                        :rules="[{ required: true, message: '请确认密码', trigger: 'blur' }, { validator: validateConfirmPassword, trigger: 'blur' }]">
            <el-input v-model="passwordForm.confirmPassword" type="password" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handlePasswordSubmit">修改密码</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="添加好友" name="five">
        <div class="search-box">
          <el-input v-model="searchKey" placeholder="请输入搜索内容" class="input-with-select">
            <el-select v-model="searchMode" slot="prepend" placeholder="请选择" style="width: 100px;">
              <el-option label="昵称" value="nickname"></el-option>
              <el-option label="电话" value="phone"></el-option>
            </el-select>
            <el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
          </el-input>
        </div>
        <el-table v-loading="searchlist_loading" :data="pagedResults()" border style="margin-top: 20px; width: 100%;">
          <el-table-column prop="nickname" label="昵称"></el-table-column>
          <el-table-column prop="phone" label="电话"></el-table-column>
          <el-table-column prop="depName" label="学院"></el-table-column>
          <el-table-column prop="action" label="操作">
            <template #default="scope">
              <el-button type="primary" :disabled="isFriend(scope.row)" @click="addFriend(scope.row)">
                {{ isFriend(scope.row) ? '已添加' : '添加好友' }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          layout="prev, pager, next"
          :total="searchList_Total"
          :page-size="searchList_PageSize"
          :current-page="searchList_curPage"
          @current-change="handlePageChange"
          style="margin-top: 15px; text-align: center;">
        </el-pagination>
      </el-tab-pane>
      <el-tab-pane label="好友列表" name="six">
        <el-table v-loading="friendlist_loading" :data="friendList" border style="margin-top: 20px; width: 100%;">
          <el-table-column prop="nickname" label="昵称"></el-table-column>
          <el-table-column prop="depName" label="学院"></el-table-column>
          <el-table-column prop="phone" label="电话"></el-table-column>
        </el-table>
        <el-pagination
          background
          layout="prev, pager, next"
          :total="friendList_Total"
          :page-size="friendList_PageSize"
          :current-page="friendList_curPage"
          @current-change="handlePageChange"
          style="margin-top: 15px; text-align: center;">
        </el-pagination>
      </el-tab-pane>
      <el-tab-pane label="社团管理" name="seven">
        <div v-loading="managedClubs_loading">
          <!-- 社团列表 -->
          <div class="club-list">
            <el-row :gutter="20">
              <el-col :xs="24" :sm="24" :md="12" :lg="12"
                      v-for="club in managedClubs"
                      :key="club.id">
                <el-card class="club-card" shadow="hover">
                  <!-- 社团基本信息 -->
                  <div class="club-header">
                    <el-avatar :size="60"
                               :src="club.avatar || 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'">
                    </el-avatar>
                    <div class="club-info">
                      <h3>{{ club.title }}</h3>
                      <el-tag type="danger" size="small">部长</el-tag>
                    </div>
                  </div>

                  <!-- 社团统计信息 -->
                  <div class="club-stats">
                    <div class="stat-item">
                      <i class="el-icon-user"></i>
                      <span>{{ club.memberCount || 0 }}</span>
                      <p>成员数</p>
                    </div>
                    <div class="stat-item">
                      <i class="el-icon-date"></i>
                      <span>{{ club.activityCount || 0 }}</span>
                      <p>活动数</p>
                    </div>
                    <div class="stat-item">
                      <i class="el-icon-trophy"></i>
                      <span>{{ club.achievementCount || 0 }}</span>
                      <p>荣誉数</p>
                    </div>
                  </div>

                                    <!-- 操作按钮 -->
                  <div class="club-actions">
                    <el-button type="primary"
                               icon="el-icon-plus"
                               size="small"
                               @click="createActivity(club)">
                      创建活动
                    </el-button>
                    <el-button type="success"
                               icon="el-icon-trophy"
                               size="small"
                               @click="addAchievement(club)">
                      添加荣誉
                    </el-button>
                    <el-button type="info"
                               icon="el-icon-view"
                               size="small"
                               @click="viewClubDetail(club)">
                      查看详情
                    </el-button>
                    <!-- 新增财务管理按钮 -->
                    <el-button type="warning"
                               icon="el-icon-money"
                               size="small"
                               @click="goToFinance(club)">
                      财务管理
                    </el-button>
                    <!-- 新增权限管理按钮 -->
                    <el-button type="danger"
                               icon="el-icon-setting"
                               size="small"
                               @click="openPermission(club)">
                      权限管理
                    </el-button>
                    <!-- 开启招新按钮 -->
                    <el-button
                      v-if="club.recruit !== 1"
                      type="success"
                      icon="el-icon-bangzhu"
                      size="small"
                      @click="toggleRecruitment(club, 1)">
                      开启招新
                    </el-button>
                    <!-- 结束招新按钮 -->
                    <el-button
                      v-if="club.recruit === 1"
                      type="danger"
                      icon="el-icon-close"
                      size="small"
                      @click="toggleRecruitment(club, 0)">
                      结束招新
                    </el-button>
                  </div>
                </el-card>
              </el-col>

              <!-- 添加创建社团卡片 -->
              <el-col :xs="24" :sm="24" :md="12" :lg="12">
                <el-card class="club-card create-club-card" shadow="hover" @click.native="showCreateClubDialog">
                  <div class="create-club-content">
                    <i class="el-icon-plus create-icon"></i>
                    <h3>创建社团</h3>
                    <p>申请创建一个新的社团组织</p>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>

    <!-- 创建活动对话框 -->
    <el-dialog
      title="创建活动"
      :visible.sync="activityDialogVisible"
      width="50%"
      @close="cancelActivityForm">
      <el-form
        ref="activityForm"
        :model="activityForm"
        :rules="activityRules"
        label-width="100px">
        <el-form-item label="活动标题" prop="title">
          <el-input v-model="activityForm.title" placeholder="请输入活动标题"></el-input>
        </el-form-item>

        <el-form-item label="活动描述" prop="description">
          <el-input
            type="textarea"
            :rows="4"
            v-model="activityForm.description"
            placeholder="请输入活动描述">
          </el-input>
        </el-form-item>

        <el-form-item label="活动类型" prop="tags">
          <el-input type="text" v-model="activityForm.tags"
                    placeholder="请输入活动类型"></el-input>
        </el-form-item>

        <el-form-item label="开始时间" prop="beginDate">
          <el-date-picker
            v-model="activityForm.beginDate"
            type="datetime"
            placeholder="选择日期和时间"
            value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="持续时间" prop="duration">
          <el-input-number
            v-model="activityForm.duration"
            :min="1"
            :max="24"
            :step="0.5"
            :precision="1"
            label="持续时间(小时)">
          </el-input-number>
          <span style="margin-left: 10px;">小时</span>
        </el-form-item>

        <el-form-item label="活动地点" prop="location">
          <el-input v-model="activityForm.location" placeholder="请输入活动地点" readonly @click.native="openVenueDialog"></el-input>
        </el-form-item>

        <el-form-item label="组织者" prop="organizer">
          <el-input v-model="activityForm.organizer" placeholder="请输入活动组织者"></el-input>
        </el-form-item>

        <el-form-item label="参与人数" prop="maxParticipants">
          <el-input-number
            v-model="activityForm.maxParticipants"
            :min="1"
            :max="1000"
            label="最大参与人数">
          </el-input-number>
        </el-form-item>

        <!-- 活动海报上传 -->
        <el-form-item label="活动海报" prop="image">
          <el-upload
            class="activity-image-uploader"
            action="#"
            :show-file-list="false"
            :auto-upload="false"
            :on-change="handleActivityImageChange"
            accept="image/*">
            <img v-if="activityForm.image" :src="activityForm.image" class="activity-image">
            <i v-else class="el-icon-plus activity-image-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelActivityForm">取 消</el-button>
        <el-button type="primary" @click="submitActivityForm">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 场地选择对话框 -->
    <el-dialog
      title="选择活动场地"
      :visible.sync="venueDialogVisible"
      width="70%">
      <div v-if="!activityForm.beginDate || !activityForm.duration" class="venue-warning">
        <i class="el-icon-warning"></i>
        请先选择活动开始时间和持续时间
      </div>
      <div v-else-if="venueLoading" class="venue-loading">
        <i class="el-icon-loading"></i>
        正在加载可用场地...
      </div>
      <div v-else>
        <el-table
          v-if="availableVenues.length > 0"
          :data="availableVenues"
          border
          style="width: 100%">
          <el-table-column
            prop="name"
            label="场地名称">
          </el-table-column>
          <el-table-column
            label="操作"
            ><   
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                @click="selectVenue(scope.row)">选择</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div v-else class="no-venues">
          <i class="el-icon-info"></i>
          <p>在选定的时间段内没有可用场地</p>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="venueDialogVisible = false">关闭</el-button>
      </div>
    </el-dialog>

    <!-- 添加荣誉对话框 -->
    <el-dialog
      title="添加荣誉"
      :visible.sync="achievementDialogVisible"
      width="50%"
      @close="cancelAchievementForm">
      <el-form
        ref="achievementForm"
        :model="achievementForm"
        :rules="achievementRules"
        label-width="100px">
        <el-form-item label="荣誉标题" prop="title">
          <el-input v-model="achievementForm.title" placeholder="请输入荣誉标题"></el-input>
        </el-form-item>

        <el-form-item label="荣誉描述" prop="description">
          <el-input
            type="textarea"
            :rows="4"
            v-model="achievementForm.description"
            placeholder="请输入荣誉描述">
          </el-input>
        </el-form-item>

        <el-form-item label="获得日期" prop="date">
          <el-date-picker
            v-model="achievementForm.date"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="荣誉类型" prop="type">
          <el-select v-model="achievementForm.type" placeholder="请选择荣誉类型">
            <el-option
              v-for="item in achievementTypes"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="荣誉图片" prop="image">
          <el-upload
            class="achievement-image-uploader"
            action="#"
            :show-file-list="false"
            :auto-upload="false"
            :on-change="handleAchievementImageChange"
            accept="image/*">
            <img v-if="achievementForm.image" :src="achievementForm.image" class="achievement-image">
            <i v-else class="el-icon-plus achievement-image-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelAchievementForm">取 消</el-button>
        <el-button type="primary" @click="submitAchievementForm">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 添加创建社团对话框 -->
    <el-dialog
      title="创建社团"
      :visible.sync="clubDialogVisible"
      width="50%"
      @close="cancelClubForm">
      <el-form
        ref="clubForm"
        :model="clubForm"
        :rules="clubRules"
        label-width="100px">
        <el-form-item label="社团名称" prop="title">
          <el-input v-model="clubForm.title" placeholder="请输入社团名称" maxlength="50"></el-input>
        </el-form-item>

        <el-form-item label="社团类型" prop="tags">
          <!-- <el-select v-model="clubForm.tags" placeholder="请选择社团类型" style="width: 100%">
            <el-option label="学术科技" value="学术科技"></el-option>
            <el-option label="文化艺术" value="文化艺术"></el-option>
            <el-option label="体育运动" value="体育运动"></el-option>
            <el-option label="社会实践" value="社会实践"></el-option>
            <el-option label="志愿公益" value="志愿公益"></el-option>
          </el-select> -->
          <el-input v-model="clubForm.tags" placeholder="请输入社团类型,使用，分割" style="width: 100%;"></el-input>
        </el-form-item>

        <el-form-item label="简短描述" prop="des">
          <el-input v-model="clubForm.des" placeholder="请输入简短描述" maxlength="200"></el-input>
        </el-form-item>

        <el-form-item label="详细介绍" prop="description">
          <el-input
            type="textarea"
            :rows="4"
            v-model="clubForm.description"
            placeholder="请输入详细介绍">
          </el-input>
        </el-form-item>

        <el-form-item label="社团Logo" prop="avatar">
          <el-upload
            class="club-logo-uploader"
            action="#"
            :show-file-list="false"
            :before-upload="beforeLogoUpload"
            :http-request="uploadClubLogo">
            <img v-if="clubForm.avatar" :src="clubForm.avatar" class="club-logo">
            <i v-else-if="logoUploading" class="el-icon-loading"></i>
            <i v-else class="el-icon-plus club-logo-uploader-icon"></i>
          </el-upload>
          <!-- <div class="el-upload__tip">建议上传正方形图片，大小不超过2MB</div> -->
        </el-form-item>

        <el-form-item label="社团海报" prop="placard">
          <el-upload
            class="club-placard-uploader"
            action="#"
            :show-file-list="false"
            :before-upload="beforePlacardUpload"
            :http-request="uploadClubPlacard">
            <img v-if="clubForm.placard" :src="clubForm.placard" class="club-placard">
            <i v-else-if="placardUploading" class="el-icon-loading"></i>
            <i v-else class="el-icon-plus club-placard-uploader-icon"></i>
          </el-upload>
          <!-- <div class="el-upload__tip">上传社团公告图片，建议尺寸 1200x300，大小不超过2MB</div> -->
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelClubForm">取 消</el-button>
        <el-button type="primary" @click="submitClubForm" :loading="submittingClub">提 交</el-button>
      </div>
    </el-dialog>
   <!-- 权限管理对话框 -->


      
    
    <!-- 权限管理对话框 -->
    <el-dialog
      title="社团权限管理"
      :visible.sync="permissionDialogVisible"
      width="70%"
      :before-close="() => permissionDialogVisible = false">
      <div v-if="currentClub" class="permission-dialog-content">
        <h3>{{ currentClub.title }} - 权限管理</h3>
        
        <el-tabs v-model="activePermissionTab">
          <el-tab-pane v-for="(item, index) in permissionList" :label="item.name" :key="index">
            <div class="permission-description">
              <p>{{ item.description }}</p>
            </div>
            <el-table
              v-loading="membersLoading"
              :data="clubMembers"
              style="width: 100%">
              <el-table-column prop="nickname" label="成员昵称"></el-table-column>
              <el-table-column prop="sno" label="学号"></el-table-column>
              <el-table-column label="当前状态">
                <template slot-scope="scope">
                  <el-tag
                    :type="scope.row[item.value] ? 'success' : 'info'"
                    effect="dark"
                  >
                    {{ scope.row[item.value] ? '已授权'  : '未授权' }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column label="操作" >
                <template slot-scope="scope">
                  <el-button
                    :type="scope.row[item.value] ? 'danger' : 'primary'"
                    size="mini"
                    @click="updatePermission(scope.row, item.value)">
                    {{ scope.row[item.value] ? '撤销权力' : '授予权力' }}
                  </el-button>
                </template>
              </el-table-column>
              
            </el-table>
          </el-tab-pane>

        </el-tabs>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import httpInstance from "@/utils/http";

export default {
  data() {
    return {
      // 权限管理对话框
      permissionDialogVisible: false,
      // 权限列表
      permissionList: [
        {
          name: '财务管理',
          value: 'finance',
          description: '财务管理师用来管理社团的财务情况'
        },
      ],
      // 当前选中的社团
      clubMembers: [],


      // 用户相关数据
      user: JSON.parse(localStorage.getItem('user')) || {
        id: '',
        nickname: '',
        phone: '',
        dep: '',
        avatar: '',
        status: '',
        role: ''
      },

      // 标签页控制
      activeName: 'first',

      // 部门映射
      depMap: {},

      // 好友列表相关
      friendList: [],
      friendList_Total: 0,
      friendList_PageSize: 5,
      friendList_curPage: 1,
      friendlist_loading: true,

      // 搜索相关
      searchResults: [],
      searchList_Total: 0,
      searchList_PageSize: 5,
      searchList_curPage: 1,
      searchlist_loading: true,
      searchMode: 'nickname',
      searchKey: '',

      // 密码修改表单
      passwordForm: {
        oldPassword: '',
        newPassword: '',
        confirmPassword: ''
      },

      // 社团管理相关
      managedClubs: [],
      managedClubs_loading: false,

      // 活动创建对话框
      activityDialogVisible: false,
      activityForm: {
        title: '',           // 活动标题
        description: '',     // 活动描述
        tags: '',            // 活动类型
        beginDate: '',       // 活动开始时间 (映射到后端的beginData)
        duration: 2,         // 活动持续时间，默认2小时
        location: '',        // 活动地点
        maxParticipants: 30, // 最大参与人数，默认30
        clubId: null,        // 社团ID
        image: '',           // 活动照片
        organizer: '',       // 活动组织者
        venueId: null,       // 添加场地ID字段
      },

      // 活动表单验证规则
      activityRules: {
        title: [
          {required: true, message: '请输入活动标题', trigger: 'blur'},
          {min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur'}
        ],
        description: [
          {required: true, message: '请输入活动描述', trigger: 'blur'}
        ],
        tags: [
          {required: true, message: '请输入活动类型', trigger: 'blur'}
        ],
        beginDate: [
          {required: true, message: '请选择活动开始时间', trigger: 'change'}
        ],
        duration: [
          {required: true, message: '请输入活动持续时间', trigger: 'blur'}
        ],
        location: [
          {required: true, message: '请输入活动地点', trigger: 'blur'}
        ],
        maxParticipants: [
          {required: true, message: '请输入最大参与人数', trigger: 'blur'},
          {type: 'number', min: 1, message: '参与人数必须大于0', trigger: 'blur'}
        ],
        organizer: [
          {required: true, message: '请输入活动组织者', trigger: 'blur'}
        ]
      },

      // 添加荣誉对话框
      achievementDialogVisible: false,
      achievementForm: {
        clubId: null,
        title: '',
        description: '',
        date: '',
        type: '',
        image: ''
      },

      // 荣誉类型选项
      achievementTypes: [
        {value: 'competition', label: '比赛奖项'},
        {value: 'recognition', label: '表彰认可'},
        {value: 'certification', label: '资质认证'},
        {value: 'other', label: '其他荣誉'}
      ],

      // 荣誉表单验证规则
      achievementRules: {
        title: [
          {required: true, message: '请输入荣誉标题', trigger: 'blur'},
          {min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur'}
        ],
        describe: [
          {required: true, message: '请输入荣誉描述', trigger: 'blur'}
        ],
        date: [
          {required: true, message: '请选择获得日期', trigger: 'change'}
        ],
        type: [
          {required: true, message: '请选择荣誉类型', trigger: 'change'}
        ]
      },

      // 创建社团相关
      clubDialogVisible: false,
      submittingClub: false,
      isCreatingClub: false,
      clubForm: {
        title: '',           // 社团名称
        des: '',             // 简短描述
        description: '',     // 详细描述
        avatar: '',          // 社团头像
        placard: '',         // 社团公告图片
        tags: '',            // 社团标签/类型
        // 其他字段如 establish_date, activity_level, favorite_count, stat 等会在后端自动设置
      },
      clubRules: {
        title: [
          {required: true, message: '请输入社团名称', trigger: 'blur'},
          {min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur'}
        ],
        des: [
          {required: true, message: '请输入简短描述', trigger: 'blur'},
          {max: 200, message: '长度不能超过 200 个字符', trigger: 'blur'}
        ],
        description: [
          {required: true, message: '请输入详细介绍', trigger: 'blur'}
        ],
        tags: [
          {required: true, message: '请选择社团类型', trigger: 'change'}
        ],
        avatar: [
          {required: true, message: '请上传社团Logo', trigger: 'change'}
        ],
        placard: [
          {required: true, message: '请上传社团公告图片', trigger: 'change'}
        ]
      },
      logoUploading: false,
      placardUploading: false,

      // 场地选择相关
      venueDialogVisible: false,
      venueLoading: false,
      availableVenues: [],
      selectedVenue: null,
    };
  },
  methods: {
    // 更新用户的权限
    async updatePermission(user, permission) {
      let stat = 0
      if(user[permission] === false) {
        stat = 1
      }
      const res = await httpInstance.post(`/api/club/updatePermissions/${this.currentClub.id}/${user.id}/${permission}/${stat}`)
      if (res.code === 200) {
        this.$message.success('权限更新成功')
        user[permission] = !user[permission]
      } else {
        this.$message.error('权限更新失败')
      }
    },


    // 财务管理页面跳转
          // 跳转到财务管理页面
    goToFinance(club) {
      this.$router.push({
        name: 'finance',
        params: { id: club.id }
      });
    },
    // 打开权限管理对话框
    openPermission(club) {
      this.currentClub = club
      this.permissionDialogVisible = true;
      this.fetchClubMembers(club.id, this.permissionList[0].value) //TODO 未实现
    },
    // 获取社团用户列表
    async fetchClubMembers(clubId, permission) {
      const res = await httpInstance.post(`/api/club/membersWithPermissions/${clubId}/${permission}`)
      if (res.code === 200) {
        this.clubMembers = res.data
      }
    },



    // ===== 用户信息相关方法 =====
    /**
     * 获取用户详细信息
     * @returns {Promise} 获取用户信息的Promise
     */
    async getUserDetail() {
      try {
        const res = await httpInstance.post('/api/user/detail');
        if (res.code === 200) {
          const {dept, ...rest} = res.data;
          this.user = {...rest, dep: dept};
          localStorage.setItem('user', JSON.stringify(this.user));
        }
      } catch (err) {
        console.log('获取用户信息失败：', err);
        const localUser = JSON.parse(localStorage.getItem('user'));
        if (localUser) this.user = localUser;
      }
    },

    /**
     * 保存用户信息
     */
    async saveUserInfo() {
      try {
        // 准备要发送的数据，处理字段名映射
        const saveData = {
          id: this.user.id,
          nickname: this.user.nickname,
          phone: this.user.phone,
          dept: this.user.dep, // 后端接收的是dept而不是dep
          avatar: this.user.avatar
        };

        // 发送请求
        const res = await httpInstance.post('/api/user/update', saveData);
        if (res.code === 200) {
          this.$message.success('个人信息修改成功');
          // 更新localStorage中的用户信息
          localStorage.setItem('user', JSON.stringify(this.user));
          // 发送事件通知全局更新用户信息（确保使用深拷贝）
          this.$bus.$emit('userInfoUpdated', JSON.parse(JSON.stringify(this.user)));
          // 重新获取最新的用户信息
          await this.getUserDetail();
        } else {
          this.$message.error(res.message || '保存失败');
        }
      } catch (err) {
        console.error('保存用户信息失败:', err);
        this.$message.error('个人信息修改失败，请稍后重试');
      }
    },

    // ===== 头像处理相关方法 =====
    triggerFileInput() {
      this.$refs.fileInput.click();
    },

    async handleAvatarChange(event) {
      const file = event.target.files[0];
      if (file) {
        const imageUrl = await this.uploadImage(file, '头像');
        if (imageUrl) {
          this.user.avatar = imageUrl;
          await this.saveUserInfo();
          // 头像更新成功后通知全局更新（使用深拷贝确保数据传递正确）
          this.$bus.$emit('userInfoUpdated', JSON.parse(JSON.stringify(this.user)));
        }
      }
    },

    // ===== 好友相关方法 =====
    /**
     * 获取好友列表
     */
    async getFriendsList() {
      this.friendlist_loading = true;
      try {
        // 先确保获取到学院映射表
        await this.getDepMap();

        const res = await httpInstance.get('api/user/friends');
        if (res.code === 200) {
          this.friendList = res.data.map(item => {
            const {password, status, role, ...rest} = item;

            // 使用dep或dept字段获取学院ID（取决于后端返回的字段名）
            const deptId = item.dep || item.dept;

            return {
              ...rest,
              dep: deptId, // 保存原始dep值用于其他地方需要
              depName: this.depMap[deptId] || '未知学院' // 添加学院名称
            };
          });
          this.friendList_Total = this.friendList.length;
          this.friendList_curPage = 1;
        }
      } catch (err) {
        console.log(err);
        this.$message.warning('获取好友列表失败');
      } finally {
        this.friendlist_loading = false;
      }
    },

    /**
     * 添加好友
     * @param {Object} user 要添加的用户信息
     */
    async addFriend(user) {
      const cur_user = JSON.parse(localStorage.getItem("user"));
      try {
        await httpInstance.post('api/user/send', {
          content: `用户<span style="color: red">${cur_user.nickname}</span>请求添加您为好友，是否同意？`,
          type: 4,
          from: cur_user.id,
          to: user.id
        });
        this.$message.success('好友请求已发送');
      } catch (err) {
        console.log(err);
        this.$message.error('发送请求失败');
      }
    },

    // ===== 社团管理相关方法 =====
    /**
     * 获取管理的社团列表
     */
    async fetchManagedClubs() {
      this.managedClubs_loading = true;
      try {
        // 获取当前用户ID
        const userId = this.user.id;
        
        if (!userId) {
          console.error('获取社团列表失败: 用户ID不存在');
          this.$message.error('获取社团列表失败，请重新登录');
          this.managedClubs = [];
          return;
        }

        // 正确传递userId参数
        const res = await httpInstance.get(`/api/club/managed?userId=${userId}`);
        console.log("获取到的社团列表:", res);
        
        if (res.code === 200 && Array.isArray(res.data)) {
          // 确保数据中包含所需的统计数据
          this.managedClubs = res.data.map(club => ({
            ...club,
            // 如果后端没有返回这些统计数据，提供默认值
            memberCount: club.memberCount || 0,
            activityCount: club.activityCount || 0,
            achievementCount: club.achievementCount || 0
          }));
          
          console.log('处理后的社团列表:', this.managedClubs);
        } else {
          this.$message.warning('获取社团列表格式不正确');
          this.managedClubs = [];
        }
      } catch (err) {
        console.error('获取管理的社团列表失败:', err);
        this.$message.error('获取社团列表失败');
        this.managedClubs = [];
      } finally {
        this.managedClubs_loading = false;
      }
    },

    // ===== 活动管理相关方法 =====
    /**
     * 打开场地选择对话框
     */
    openVenueDialog() {
      if (!this.activityForm.beginDate || !this.activityForm.duration) {
        this.$message.warning('请先选择活动开始时间和持续时间');
        return;
      }
      
      this.venueDialogVisible = true;
      this.fetchAvailableVenues();
    },
    
    /**
     * 获取可用场地列表
     */
    async fetchAvailableVenues() {
      this.venueLoading = true;
      try {
        // 将小时转换为分钟
        const durationMinutes = Math.round(this.activityForm.duration * 60);
        
        const res = await httpInstance.get('/api/venue/available', {
          params: {
            beginTime: this.activityForm.beginDate,
            duration: durationMinutes
          }
        });
        
        if (res.code === 200) {
          this.availableVenues = res.data || [];
        } else {
          this.$message.error(res.message || '获取可用场地失败');
          this.availableVenues = [];
        }
      } catch (err) {
        console.error('获取可用场地失败:', err);
        this.$message.error('获取可用场地失败，请稍后重试');
        this.availableVenues = [];
      } finally {
        this.venueLoading = false;
      }
    },
    
    /**
     * 选择场地
     * @param {Object} venue 选择的场地对象
     */
    selectVenue(venue) {
      this.selectedVenue = venue;
      this.activityForm.location = venue.name;
      this.activityForm.venueId = venue.id; // 保存场地ID，用于提交
      this.venueDialogVisible = false;
      this.$message.success(`已选择场地: ${venue.name}`);
    },
    
    /**
     * 提交活动表单
     */
    submitActivityForm() {
      this.$refs.activityForm.validate(async (valid) => {
        if (valid) {
          try {
            // 准备提交的数据，与后端实体类匹配
            const formattedBeginDate = this.activityForm.beginDate ? 
              this.activityForm.beginDate.replace(' ', 'T') : null;
              
            const activityData = {
              clubId: this.activityForm.clubId,
              title: this.activityForm.title,
              description: this.activityForm.description,
              image: this.activityForm.image,
              tags: this.activityForm.tags,
              maxParticipants: this.activityForm.maxParticipants,
              beginData: formattedBeginDate, // 使用格式化后的日期时间字符串
              duration: Math.round(this.activityForm.duration * 60), // 转换为分钟
              location: this.activityForm.location,
              organizer: this.activityForm.organizer,
              venueId: this.activityForm.venueId, // 添加场地ID
              status: 0, // 默认待审核状态
            };

            console.log('提交活动数据:', activityData);

            const res = await httpInstance.post('/api/activity/create', activityData, {
              headers: {
                'Content-Type': 'application/json'
              }
            });

            if (res.code === 200) {
              this.$message.success('活动创建申请已提交，等待审核');
              this.resetActivityForm();
              // 刷新社团列表以更新活动数量
              this.fetchManagedClubs();
            } else {
              this.$message.error(res.msg || '创建失败');
            }
          } catch (err) {
            console.error('创建活动失败:', err);
            this.$message.error('创建活动失败');
          }
        }
      });
    },

    async handleActivityImageChange(file) {
      const imageUrl = await this.uploadImage(file, '活动海报');
      if (imageUrl) {
        this.activityForm.image = imageUrl;
      }
    },

    // ===== 工具方法 =====
    /**
     * 分页处理
     */
    pagedResults() {
      const start = (this.searchList_curPage - 1) * this.searchList_PageSize;
      const end = start + this.searchList_PageSize;
      return this.searchResults.slice(start, end);
    },

    /**
     * 检查是否已是好友或自己
     */
    isFriend(user) {
      return user.id === this.user.id || this.friendList.some(friend => friend.id === user.id);
    },

    tab_click_method() {
      this.searchlist_loading = true;
      this.friendlist_loading = true;
      setTimeout(() => {
        this.searchlist_loading = false;
        this.friendlist_loading = false;
      }, 500);
    },
    handleSearch() {
      this.searchlist_loading = true;

      // 确保先获取学院映射表
      this.getDepMap().then(() => {
        httpInstance({
          url: '/api/user/search?searchMode=' + this.searchMode + "&keyword=" + this.searchKey,
          method: "get"
        }).then(res => {
          if (res.code === 200) {
            const processedResults = res.data.map(item => {
              const {password, status, role, ...rest} = item;

              // 使用dep或dept字段获取学院ID（取决于后端返回的字段名）
              const deptId = item.dep || item.dept;

              return {
                ...rest,
                dep: deptId, // 保存原始dep值用于其他地方需要
                depName: this.depMap[deptId] || '未知学院' // 添加学院名称
              };
            });
            this.searchResults = processedResults;
            this.searchList_Total = processedResults.length;
            this.searchList_curPage = 1;
          }
          this.searchlist_loading = false;
        }).catch(err => {
          console.log(err);
          this.$message.warning('搜索失败');
          this.searchlist_loading = false;
        });
      }).catch(err => {
        console.log('获取学院映射表失败：', err);
        this.searchlist_loading = false;
        this.$message.warning('获取学院信息失败');
      });
    },
    getDepMap() {
      return httpInstance({
        url: '/api/sys/dep',
        method: 'get'
      }).then(res => {
        if (res.code === 200) {
          this.depMap = res.data;
          console.log('学院映射表：', this.depMap);
        }
      }).catch(err => {
        console.log('获取学院映射表失败：', err);
      });
    },
    handlePageChange(page) {
      this.searchList_curPage = page;
    },
    handlePasswordSubmit() {
      this.$refs.passwordForm.validate(async (valid) => {
        if (!valid) {
          return false;
        }

        try {
          const res = await httpInstance.post('/api/user/updatePassword', {
            oldPassword: this.passwordForm.oldPassword,
            newPassword: this.passwordForm.newPassword
          });

          if (res.code === 200) {
            this.$message.success('密码修改成功');
            // 清空表单
            this.$refs.passwordForm.resetFields();
          } else {
            this.$message.error(res.message || '密码修改失败');
          }
        } catch (err) {
          console.error('密码修改失败:', err);
          this.$message.error('密码修改失败，请稍后重试');
        }
      });
    },
    validateConfirmPassword(rule, value, callback) {
      if (value === this.passwordForm.newPassword) {
        callback();
      } else {
        callback(new Error('两次输入的密码不一致'));
      }
    },
    addAchievement(club) {
      this.achievementForm.clubId = club.id;
      console.log(this.achievementForm);
      this.achievementDialogVisible = true;
    },
    viewClubDetail(club) {
      // 跳转到社团详情页面
      this.$router.push({
        name: 'myclub',
        params: {id: club.id}
      });
    },
    cancelActivityForm() {
      this.$refs.activityForm && this.$refs.activityForm.resetFields();
      this.activityForm.image = ''; // 清除图片
      this.activityDialogVisible = false;
    },
    submitAchievementForm() {
      this.$refs.achievementForm.validate(async (valid) => {
        if (valid) {
          try {
            const res = await httpInstance.post('/api/achievement/create', this.achievementForm, {
              headers: {
                'Content-Type': 'application/json'
              }
            });

            if (res.code === 200) {
              this.$message.success('荣誉添加成功');
              this.resetAchievementForm();
              // 刷新社团列表以更新荣誉数量
              this.fetchManagedClubs();
            } else {
              this.$message.error(res.msg || '添加失败');
            }
          } catch (err) {
            console.error('添加荣誉失败:', err);
            this.$message.error('添加荣誉失败');
          }
        }
      });
    },
    resetAchievementForm() {
      this.achievementDialogVisible = false;
      this.$refs.achievementForm.resetFields();
      this.achievementForm.images = '';
    },
    async handleAchievementImageChange(file) {
      const imageUrl = await this.uploadImage(file, '荣誉图片');
      if (imageUrl) {
        this.achievementForm.image = imageUrl;
      }
    },
    cancelAchievementForm() {
      this.resetAchievementForm();
    },
    /**
     * 通用图片上传方法
     * @param {File|Object} file 文件对象或element-ui上传组件的文件对象
     * @param {String} type 上传类型标识，用于错误提示，如：'头像'、'活动海报'、'荣誉图片'
     * @returns {Promise<String|null>} 返回图片URL或null
     */
    async uploadImage(file, type = '图片') {
      try {
        // 获取实际的文件对象
        const actualFile = file.raw || file;

        // 文件类型和大小验证
        const isImage = actualFile.type.startsWith('image/');
        const isLt2M = actualFile.size / 1024 / 1024 < 2;

        if (!isImage) {
          this.$message.error(`${type}必须是图片格式！`);
          return null;
        }
        if (!isLt2M) {
          this.$message.error(`${type}大小不能超过 2MB！`);
          return null;
        }

        // 创建表单数据
        const formData = new FormData();
        formData.append('file', actualFile);

        // 发送上传请求
        const res = await httpInstance.post('api/sys/upload', formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        });

        if (res.code === 200) {
          this.$message.success(`${type}上传成功`);
          return res.data; // 返回服务器返回的图片URL
        } else {
          this.$message.error(res.msg || `${type}上传失败`);
          return null;
        }
      } catch (err) {
        console.error(`${type}上传失败:`, err);
        this.$message.error(`${type}上传失败，请重试`);
        return null;
      }
    },
    toggleRecruitment(club, newStatus) {
      // 根据新状态确定操作文本
      const statusText = newStatus === 1 ? '开启' : '结束';

      this.$confirm(`确定要${statusText}招新吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          const res = await httpInstance.post('/api/club/updateStat/' + club.id + '/' + newStatus);
          if (res.code === 200) {
            // 更新本地状态
            club.recruit = newStatus;
            this.$message.success(`${statusText}招新成功`);
          } else {
            this.$message.error(res.message || `${statusText}招新失败`);
          }
        } catch (err) {
          console.error('更新招新状态失败:', err);
          this.$message.error('操作失败，请重试');
        }
      }).catch(() => {
        this.$message.info('已取消操作');
      });
    },
    showCreateClubDialog() {
      this.clubDialogVisible = true;
      this.isCreatingClub = true;
    },
    cancelClubForm() {
      this.clubDialogVisible = false;
      this.$refs.clubForm && this.$refs.clubForm.resetFields();
      this.clubForm.avatar = '';
      this.clubForm.placard = '';
      this.isCreatingClub = false;
    },
    // 创建社团
    submitClubForm() {
      this.$refs.clubForm.validate(async (valid) => {
        if (valid) {
          this.submittingClub = true;
          try {
            // 构建提交的数据，与数据库字段对应
            const clubData = {
              title: this.clubForm.title,
              des: this.clubForm.des,
              description: this.clubForm.description,
              avatar: this.clubForm.avatar,
              placard: this.clubForm.placard,
              tags: this.clubForm.tags,
              // 其他字段如 establish_date, activity_level, favorite_count, stat 等会在后端自动设置
            };
            console.log("创建社团时的社团数据：", clubData);
            // 发送API请求
            const response = await httpInstance.post('/api/club/create', clubData);

            // 模拟API调用
            await new Promise(resolve => setTimeout(resolve, 1000));

            this.$message.success('社团申请已提交，请等待审核');
            this.clubDialogVisible = false;
            this.$refs.clubForm.resetFields();

            // 刷新社团列表
            this.fetchManagedClubs();
          } catch (error) {
            console.error('创建社团失败:', error);
            this.$message.error('创建社团失败，请稍后重试');
          } finally {
            this.submittingClub = false;
            this.isCreatingClub = false;
          }
        } else {
          return false;
        }
      });
    },
    beforeLogoUpload(file) {
      const isImage = file.type.startsWith('image/');
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isImage) {
        this.$message.error('上传Logo只能是图片格式!');
        return false;
      }
      if (!isLt2M) {
        this.$message.error('上传Logo图片大小不能超过 2MB!');
        return false;
      }
      return true;
    },
    uploadClubLogo(options) {
      const file = options.file;
      const formData = new FormData();
      formData.append('file', file);

      // 显示上传中的加载状态
      this.logoUploading = true;

      // 调用后端上传接口
      httpInstance.post('/api/sys/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(response => {
        if (response.code === 200) {
          // 上传成功，设置图片URL
          this.clubForm.avatar = response.data;
          this.$message.success('Logo上传成功');
        } else {
          this.$message.error(response.data.msg || 'Logo上传失败');
        }
      }).catch(error => {
        console.error('Logo上传失败:', error);
        this.$message.error('Logo上传失败，请稍后重试');
      }).finally(() => {
        this.logoUploading = false;
      });
    },
    beforePlacardUpload(file) {
      const isImage = file.type.startsWith('image/');
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isImage) {
        this.$message.error('上传公告只能是图片格式!');
        return false;
      }
      if (!isLt2M) {
        this.$message.error('上传公告图片大小不能超过 2MB!');
        return false;
      }
      return true;
    },
    uploadClubPlacard(options) {
      const file = options.file;
      const formData = new FormData();
      formData.append('file', file);

      // 显示上传中的加载状态
      this.placardUploading = true;

      // 调用后端上传接口
      httpInstance.post('/api/sys/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(response => {
        if (response.code === 200) {
          // 上传成功，设置图片URL
          this.clubForm.placard = response.data;
          this.$message.success('公告图片上传成功');
        } else {
          this.$message.error(response.data.msg || '公告图片上传失败');
        }
      }).catch(error => {
        console.error('公告图片上传失败:', error);
        this.$message.error('公告图片上传失败，请稍后重试');
      }).finally(() => {
        this.placardUploading = false;
      });
    },
    /**
     * 打开创建活动对话框
     * @param {Object} club 社团信息
     */
    createActivity(club) {
      // 使用已存在的取消方法来清空表单
      this.cancelActivityForm();
      
      // 设置社团ID和组织者
      this.activityForm.clubId = club.id;
      this.activityForm.organizer = this.user.nickname || ''; // 默认填入当前用户昵称
      
      // 打开对话框
      this.activityDialogVisible = true;
    },
    /**
     * 重置活动表单
     */
    resetActivityForm() {
      // 重置表单数据到初始状态
      this.activityForm = {
        title: '',
        description: '',
        tags: '',
        beginDate: '',
        duration: 2,
        location: '',
        maxParticipants: 30,
        clubId: null,
        image: '',
        organizer: '',
        venueId: null, // 添加场地ID字段
      };
      
      // 重置场地选择相关数据
      this.selectedVenue = null;
      this.availableVenues = [];
      
      // 如果表单引用存在，使用Element UI的重置方法
      if (this.$refs.activityForm) {
        // 使用nextTick确保DOM更新后再重置表单验证状态
        this.$nextTick(() => {
          this.$refs.activityForm.clearValidate();
        });
      }
    },
  },
  mounted() {
    // 修改初始化逻辑
    Promise.all([
      this.getDepMap(),
      this.getUserDetail()
    ])
      .then(() => {
        return this.getFriendsList();
      })
      .then(() => {
        // 无论当前标签是什么，都尝试获取社团列表
        return this.fetchManagedClubs();
      })
      .catch(err => {
        console.log('初始化失败：', err);
        // 即使失败也尝试获取数据
        this.getFriendsList();
        this.fetchManagedClubs();
      });
  },
  watch: {
    activeName(newTab) {
      if (newTab === 'six') {
        this.friendlist_loading = true;
        this.getFriendsList().finally(() => {
          this.friendlist_loading = false;
        });
      }
      if (newTab === 'seven') {
        this.fetchManagedClubs();
      }
    }
  }
};
</script>

<style scoped>
.personal_box {
  width: 80%;
  min-height: 100vh;
  margin: 40px auto;
  padding: 30px;
  background-color: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.el-tabs {
  padding: 0 10px;
}

/* 标签页样式 */
:deep(.el-tabs__item) {
  font-size: 16px;
  height: 50px;
  line-height: 50px;
  color: #666;
  padding: 0 20px;
  transition: all 0.3s ease;
}

:deep(.el-tabs__item.is-active) {
  color: #4b6cb7;
  font-weight: 500;
}

:deep(.el-tabs__active-bar) {
  background-color: #4b6cb7;
  height: 3px;
}

:deep(.el-tabs__nav-wrap::after) {
  height: 1px;
  background-color: #f0f0f0;
}

/* 添加好友按钮样式 */
.el-table .el-button {
  width: 120px;
  text-align: center;
  padding: 8px 15px;
  border-radius: 20px;
  transition: all 0.3s ease;
  font-weight: 500;
}

.el-table .el-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(75, 108, 183, 0.3);
}

/* 搜索框样式 */
.search-box {
  width: 90%;
  margin: 20px auto 30px;
}

.input-with-select {
  border-radius: 8px;
  overflow: hidden;
}

:deep(.el-input__inner) {
  height: 45px;
  font-size: 15px;
}

:deep(.el-input-group__prepend) {
  background-color: #f9fafb;
  border-color: #DCDFE6;
  padding: 0 15px;
}

:deep(.el-button--primary) {
  background: linear-gradient(135deg, #4b6cb7 0%, #182848 100%);
  border: none;
  border-radius: 8px;
  transition: all 0.3s ease;
}

:deep(.el-button--primary:hover) {
  transform: translateY(-2px);
  box-shadow: 0 8px 15px rgba(75, 108, 183, 0.3);
}

:deep(.el-button--danger) {
  background: linear-gradient(135deg, #f5365c 0%, #f56036 100%);
  border: none;
  transition: all 0.3s ease;
}

:deep(.el-button--danger:hover) {
  transform: translateY(-2px);
  box-shadow: 0 8px 15px rgba(245, 54, 92, 0.3);
}

:deep(.el-button--success) {
  background: linear-gradient(135deg, #2dce89 0%, #2dcca0 100%);
  border: none;
  transition: all 0.3s ease;
}

:deep(.el-button--success:hover) {
  transform: translateY(-2px);
  box-shadow: 0 8px 15px rgba(45, 206, 137, 0.3);
}

/* 用户信息区域样式 */
.avatar-container {
  position: relative;
  display: inline-block;
  border-radius: 50%;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  cursor: pointer;
}

.el-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  transition: all 0.3s ease;
  border: 3px solid white;
  box-shadow: 0 0 0 2px #4b6cb7;
}

.avatar-container:hover .el-avatar {
  opacity: 0.8;
  transform: scale(1.05);
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  display: none;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  border-radius: 50%;
}

.avatar-container:hover .overlay {
  display: flex;
}

.el-divider {
  margin: 25px 0;
  background-color: #f0f0f0;
}

/* 表格样式 */
.el-table {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

:deep(.el-table th) {
  background-color: #f5f7fa;
  color: #333;
  font-weight: 600;
  padding: 12px 0;
}

:deep(.el-table--border) {
  border-radius: 8px;
  overflow: hidden;
}

.el-pagination {
  margin-top: 25px;
  display: flex;
  justify-content: center;
}

/* 社团卡片样式 */
.club-list {
  padding: 10px 0;
}

.club-card {
  margin-bottom: 25px;
  transition: all 0.3s;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  border: none;
}

.club-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

.club-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding: 0 5px;
}

.club-info {
  margin-left: 15px;
}

.club-info h3 {
  margin: 0 0 10px 0;
  font-size: 18px;
  color: #333;
  font-weight: 600;
}

.club-stats {
  display: flex;
  justify-content: space-around;
  padding: 20px 0;
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 20px;
  background: #f9fafb;
}

.stat-item {
  text-align: center;
  padding: 0 10px;
}

.stat-item i {
  font-size: 28px;
  color: #4b6cb7;
  margin-bottom: 10px;
  display: block;
}

.stat-item span {
  display: block;
  font-size: 22px;
  font-weight: bold;
  color: #333;
}

.stat-item p {
  margin: 5px 0 0;
  font-size: 13px;
  color: #666;
}

.club-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0 5px;
  justify-content: space-between;
}

.club-actions .el-button {
  padding: 10px 15px;
  border-radius: 8px;
  width: calc(50% - 5px);
  margin: 0;
  font-weight: 500;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.club-actions .el-button i {
  margin-right: 8px;
  font-size: 16px;
}

/* 对话框样式 */
:deep(.el-dialog) {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

:deep(.el-dialog__title) {
  font-size: 20px;
  font-weight: 600;
  color: #333;
}

:deep(.el-dialog__header) {
  padding: 20px 25px;
  background: linear-gradient(135deg, #4b6cb7 0%, #182848 100%);
}

:deep(.el-dialog__title) {
  color: white;
}

:deep(.el-dialog__headerbtn .el-dialog__close) {
  color: rgba(255, 255, 255, 0.8);
  font-size: 18px;
}

:deep(.el-dialog__body) {
  padding: 30px;
}

:deep(.el-dialog__footer) {
  padding: 15px 25px 20px;
  border-top: 1px solid #f0f0f0;
}

.el-form-item {
  margin-bottom: 25px;
}

/* 图片上传组件 */
.activity-image-uploader,
.achievement-image-uploader {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px dashed #e0e0e0;
  border-radius: 12px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 400px;
  height: 225px;
  transition: all 0.3s ease;
}

.activity-image-uploader:hover,
.achievement-image-uploader:hover {
  border-color: #4b6cb7;
  box-shadow: 0 0 10px rgba(75, 108, 183, 0.2);
}

.activity-image-uploader-icon,
.achievement-image-uploader-icon {
  font-size: 32px;
  color: #c0c4cc;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.activity-image,
.achievement-image {
  width: 100%;
  height: 225px;
  display: block;
  object-fit: cover;
  border-radius: 10px;
}

:deep(.el-upload__tip) {
  font-size: 13px;
  color: #909399;
  margin-top: 10px;
}

/* 响应式适配 */
@media (max-width: 768px) {
  .personal_box {
    width: 95%;
    padding: 20px 15px;
  }

  .search-box {
    width: 100%;
  }

  .club-actions .el-button {
    width: 100%;
    margin-bottom: 10px;
  }
}

/* 创建社团卡片样式 */
.create-club-card {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 345px;
  cursor: pointer;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
  transition: all 0.3s ease;
}

.create-club-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
  background: linear-gradient(135deg, #e4e8f0 0%, #d1d8e6 100%);
}

.create-club-content {
  text-align: center;
  padding: 30px 0;
}

.create-icon {
  font-size: 48px;
  color: #4b6cb7;
  margin-bottom: 15px;
}

.create-club-content h3 {
  font-size: 20px;
  color: #333;
  margin: 0 0 10px 0;
}

.create-club-content p {
  color: #666;
  margin: 0;
}

/* 社团Logo上传样式 */
.club-logo-uploader {
  border: 2px dashed #e0e0e0;
  border-radius: 12px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 150px;
  height: 150px;
  transition: all 0.3s ease;
}

.club-logo-uploader:hover {
  border-color: #4b6cb7;
  box-shadow: 0 0 10px rgba(75, 108, 183, 0.2);
}

.club-logo-uploader-icon {
  font-size: 32px;
  color: #c0c4cc;
  width: 150px;
  height: 150px;
  line-height: 150px;
  text-align: center;
}

.club-logo {
  width: 150px;
  height: 150px;
  display: block;
  object-fit: cover;
  border-radius: 10px;
}

/* 社团公告上传样式 */
.club-placard-uploader {
  border: 2px dashed #e0e0e0;
  border-radius: 12px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 400px;
  height: 120px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.club-placard-uploader:hover {
  border-color: #4b6cb7;
  box-shadow: 0 0 10px rgba(75, 108, 183, 0.2);
}

.club-placard-uploader-icon {
  font-size: 32px;
  color: #c0c4cc;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.club-placard {
  width: 100%;
  height: 120px;
  display: block;
  object-fit: cover;
  border-radius: 10px;
}

/* 禁用状态的输入框样式 */
:deep(.el-input.is-disabled .el-input__inner) {
  background-color: #f5f7fa;
  border-color: #e4e7ed;
  color: #606266;
  cursor: not-allowed;
}

/* 场地选择相关样式 */
.venue-warning, .venue-loading, .no-venues {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
  text-align: center;
  color: #909399;
}

.venue-warning i, .venue-loading i, .no-venues i {
  font-size: 48px;
  margin-bottom: 20px;
}

.venue-warning {
  color: #E6A23C;
}

.venue-loading i {
  font-size: 32px;
  color: #409EFF;
}

.no-venues {
  color: #909399;
}

.no-venues i {
  font-size: 48px;
  color: #909399;
}

.no-venues p {
  font-size: 16px;
  margin-top: 10px;
}

/* 使location输入框看起来可点击 */
.el-form-item[label="活动地点"] .el-input__inner {
  cursor: pointer;
  background-color: #f9fafc;
}
</style>
